<!doctype html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Language" content="en" />
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#4188c9">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
  <title>账号密码管理</title>
  <script src="./assets/js/require.min.js"></script>
  <script src="./assets/js/owner_work.js"></script>
  <link href="./assets/css/dashboard.css" rel="stylesheet" />
  <script src="./assets/js/dashboard.js"></script>
</head>

<body class="">
  <div class="" role="alert" id="alert_tip">
    <i class="" aria-hidden="true"></i> <span> </span>
  </div>
  <div class="page">
    <div class="flex-fill">
      <div class="header py-4">
        <div class="container">
          <div class="d-flex">
            <a class="header-brand" href="./index.html">
              <h2 class="mt-0 mb-4">Owner-work</h2>
            </a>
            <div class="d-flex order-lg-2 ml-auto">
              <div class="nav-item d-none d-md-flex">
                <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
              </div>
              <div class="dropdown">
                <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                  <span class="avatar avatar-lg" ></span>
                  <span class="ml-2 d-none d-lg-block">
                    <span class="text-default" id="userName"> </span>
                    <small class="text-muted d-block mt-1">Administrator</small>
                  </span>
                </a>
                <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                  <a class="dropdown-item" href="./user_info.html">
                    <i class="dropdown-icon fe fe-user"></i> 个人信息
                  </a>
                  <a class="dropdown-item" href="#">
                    <i class="dropdown-icon fe fe-settings"></i> 设置
                  </a>
                  <a class="dropdown-item" href="./email_change.html">
                    <i class="dropdown-icon fe fe-mail"></i> 更改邮箱
                  </a>
                  <a class="dropdown-item" href="./password_change.html">
                    <i class="dropdown-icon fe fe-send"></i> 更改密码
                  </a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="./faq.html" target="_blank">
                    <i class="dropdown-icon fe fe-help-circle"></i> 需要帮助?
                  </a>
                  <a class="dropdown-item" href="#" onclick="loginOut()">
                    <i class="dropdown-icon fe fe-log-out"></i> 退出
                  </a>
                </div>
              </div>
            </div>
            <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse"
              data-target="#headerMenuCollapse">
              <span class="header-toggler-icon"></span>
            </a>
          </div>
        </div>
      </div>
      <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-lg order-lg-first">
              <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                <li class="nav-item">
                  <a href="./index.html" class="nav-link "><i class="fe fe-cloud"></i> 首页</a>
                </li>
                <li class="nav-item dropdown">
                  <a href="./company.html" class="nav-link "><i class="fe fe-cloud-drizzle"></i> 公司管理</a>
                </li>
                <li class="nav-item">
                  <a href="./company_data.html" class="nav-link active"><i class="fe fe-cloud-lightning"></i>账户管理 </a>
                </li>
                <li class="nav-item">
                  <a href="./logger.html" class="nav-link"><i class="fe fe-cloud-rain"></i> 操作日志</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="my-3 my-md-5">
        <div class="container">
          <div class="row">
            <div class="col-lg-3  mb-4">
              <div class="list-group list-group-transparent mb-0" id="raw_company_list">
                <a href="#" class="list-group-item list-group-item-action">
                  <span class="icon mr-3"><i class="fe fe-x-square"></i></span>暂无数据！
                </a>
              </div>
            </div>
            <div class="col-lg-9">
              <div class="card">
                <div class="card-header">
                  <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#newDataModal">
                    <i class="fe fe-plus mr-2"></i>新增账户
                  </button>
                  <div class="col-lg-3 ml-auto">
                    <form class="input-icon my-3 my-lg-3">
                      <input type="text" class="form-control header-search" placeholder="输入关键字" name="search">
                      <div class="input-icon-addon">
                        <button type="button" class="btn btn-secondary" onclick="searchInfo()"><i class="fe fe-search"></i></button>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="dimmer" id="dimmer_body">
                  <div class="loader"></div>
                  <div class="table-responsive dimmer-content">
                    <table class="table card-table table-vcenter text-nowrap datatable">
                      <thead>
                        <tr>
                          <th class="w-1">No.</th>
                          <th>账户</th>
                          <th>密码</th>
                          <th>备注</th>
                          <th>创建时间</th>
                          <th>编辑</th>
                          <th>删除</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>暂无数据！</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="card-footer" name="pagnate" style="text-align: center;">
                  <label>共 <span id="data_count">1</span> 条</label>
                  <label>每页 <select name="the_limit" class="select">
                      <option value="10">10</option>
                      <option value="20">20</option>
                      <option value="30">30</option>
                    </select> 条</label>
                  <label>
                    <button class="btn btn-blue" id="previou_page">上一页</button>
                    <label><span id="current_page">1</span> / <span id="total_page">1</span></label>
                    <button class="btn btn-blue" id="next_page">下一页</button>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer class="footer">
      <div class="container">
        <div class="row align-items-center flex-row-reverse">
          <div class="col-auto ml-lg-auto">
            <div class="row align-items-center">
              <div class="col-auto">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item"><a href="./faq.html" target="_blank">FAQ</a></li>
                </ul>
              </div>
              <div class="col-auto">
                <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm" target="_blank">Source code</a>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
            Copyright © 2020 <a href="./index.html">Owner-work</a>. 有任何问题，请发送邮件至邮箱 heliangyuan10#163.com (#换成@).
          </div>
        </div>
      </div>
    </footer>
  </div>

  <!-- 新增数据的模态框 -->
  <div class="modal fade" id="newDataModal" role="dialog" aria-labelledby="">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="card-status bg-blue"></div>
          <h4 class="text-center" id="modal_title">新增账户</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
        </div>
        <div id="newData" class="card dimmer">
          <div class="loader"></div>
          <div class="card-body dimmer-content">
            <div class="form-group">
              <label class="form-label">账户名<span class="form-required">*</span></label>
              <input type="text" class="form-control" name="n_user_name" value="">
            </div>
            <div class="form-group">
              <label class="form-label">密码<span class="form-required">*</span></label>
              <input type="text" class="form-control" name="n_password" value="">
            </div>
            <div class="form-grwork_oup">
              <label class="form-label">备注</label>
              <textarea class="form-control" name="n_remark"> </textarea>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
              <button type="button" class="btn btn-primary" onclick="newData()">确认</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑数据的模态框 -->
  <div class="modal fade" id="editDataModal" role="dialog" aria-labelledby="">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="card-status bg-green"></div>
          <h4 class="text-center" id="modal_title">编辑账户</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
        </div>
        <div id="editData" class="card dimmer">
          <div class="loader"></div>
          <div class="card-body dimmer-content">
            <input type="hidden" class="form-control" name="e_data_id" value="">
            <div class="form-group">
              <label class="form-label">账户名<span class="form-required">*</span></label>
              <input type="text" class="form-control" name="e_username" value="">
            </div>
            <div class="form-group">
              <label class="form-label">密码<span class="form-required">*</span></label>
              <input type="text" class="form-control" name="e_password" value="">
            </div>
            <div class="form-grwork_oup">
              <label class="form-label">备注</label>
              <textarea class="form-control" name="e_remark"></textarea>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
              <button type="button" class="btn btn-primary" onclick="goEditData()">更新</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 删除数据的模态框 -->
  <div class="modal fade" id="deleteDataModal" role="dialog" aria-labelledby="">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="card-status bg-red"></div>
        <div class="modal-header">
          <h4 class="text-center" id="deleteModalLabel">删除账户</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
        </div>
        <div id="delData" class="card dimmer">
          <div class="loader"></div>
          <div class="card-body dimmer-content">
            <input type="hidden" class="form-control" name="d_data_id" value="">
            <div class="form-group">
              <label class="form-label">账户名<span class="form-required">*</span></label>
              <input type="text" class="form-control" name="d_username" value="">
            </div>
            <div class="form-group">
              <label class="form-label">密码<span class="form-required">*</span></label>
              <input type="text" class="form-control" name="d_password" value="">
            </div>
            <div class="form-grwork_oup">
              <label class="form-label">备注</label>
              <textarea class="form-control" name="d_remark"></textarea>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
              <button type="button" class="btn btn-primary" onclick="goDelData()">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
<script>
  let chioce_company_id = 0

  require(["jquery"], function ($) {
    $("#userName")[0].innerText = localStorage.UserName
    if (localStorage.UserHeadImg!=null && localStorage.UserHeadImg!="null" && localStorage.UserHeadImg!=""){
      $(".avatar.avatar-lg").css("background-image", "url("+ localStorage.UserHeadImg +")")
    }else{
      $(".avatar.avatar-lg").css("background-image", "url(./demo/faces/male/44.jpg)")
    }

    // 初始化公司列表
    getCompanyList()

    // 点击上一页
    $("#previou_page").click(() => {
      console.log("当前第 " + $("#current_page")[0].innerText + " 页")
      if ($("#current_page")[0].innerText == 1) {
        console.log("当前已是第一页！")
      } else {
        getDataList(page = parseInt($("#current_page")[0].innerText) - 1)
      }
    })

    // 点击下一页
    $("#next_page").click(() => {
      console.log("当前第 " + $("#current_page")[0].innerText + " 页")
      if ($("#current_page")[0].innerText == $("#total_page")[0].innerText) {
        console.log("当前已是最后一页！")
      } else {
        getDataList(page = parseInt($("#current_page")[0].innerText) + 1)
      }
    })

    // 选择每页多少数据
    $("select[name=the_limit]").change(() => {
      let limit_c = $("select[name=the_limit]").val()
      console.log(limit_c)
      getDataList(page = 1)
    })

  })

  // 获取公司列表数据
  function getCompanyList(){
    $.ajax(localStorage.BaseUrl + "/company/list", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "GET",
      data: {
        is_all: 1,
      }
    }).done(function(data){
      console.log(data)
      if (data["status"] == 1){
        if (data["data"]["data_count"] > 0){
          let company_list = $("#raw_company_list")
          company_list.empty()
          for(i=0;i<data["data"]["data_count"]; i++){
            if (i == 0 && chioce_company_id == 0){
              chioce_company_id = data["data"]["data_list"][0]["id"]
              console.log("初始化 chioce_company_id： " + chioce_company_id)
            }
            addCompanyList(data["data"]["data_list"][i])
          }
        // 对应的data_list
        getDataList()

        }
      }else{
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if (status == "error") {
        server_500()
      }
    }).always(()=>{

    })
  }

  function addCompanyList(data){
    let company_list = $("#raw_company_list")
    let a_company = ``
    if (chioce_company_id == data["id"]){
      a_company  = `<a href="#" class="list-group-item list-group-item-action active" onclick="changeCompany(` + data["id"] + `)">
                      <span class="icon mr-3"><i class="fe fe-flag"></i></span>` + data["name"] + `   
                    </a>`
    }else{
      a_company  = `<a href="#" class="list-group-item list-group-item-action" onclick="changeCompany(` + data["id"] + `)">
                      <span class="icon mr-3"></span>` + data["name"] + `   
                    </a>`
    }
    company_list.append(a_company)
  }

  function changeCompany(id){
    console.log("选择公司的id：" + id)
    chioce_company_id = id
    $("input[name=search]").val("")
    getCompanyList()
  }

  function getDataList(page=1){
    $("#dimmer_body").addClass("active")
    $.ajax(localStorage.BaseUrl + "/company/data_list", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "GET",
      data: {
        page: page,
        limit: $("select[name=the_limit]").val(),
        company_id: chioce_company_id,
        key_word: $("input[name=search]").val()
      }
    }).done(function(data){
      console.log(data)
      if (data["status"] == 1){
        $("#current_page")[0].innerText = page
        // 总条数
        $("#data_count")[0].innerText = data["data"]["data_count"]
        // 分几页
        $("#total_page")[0].innerText = Math.ceil(data["data"]["data_count"] / $("select[name=the_limit]").val())
        $("tbody").empty()

        if (data["data"]["data_count"] == 0){
          emptyDataList()
        }else{
          for (i=0;i<data["data"]["data_list"].length;i++){
            data["data"]["data_list"][i]["No"] = i+1
            addDataList(data["data"]["data_list"][i])
          }
        }
        
      }else{
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if (status == "error") {
        server_500()
      }
    }).always(()=>{
      $("#dimmer_body").removeClass("active")
    })
  }

  // 拼接数据
  function addDataList(data) {
    let tbody = $("tbody")[0]
    let new_tr = document.createElement("tr")
    let data_No = data["No"]
    let data_id = data["id"]
    let data_username = data["username"] || ""
    let data_password = data["password"] || ""
    let data_remark = data["remark"] || ""
    let data_create_time = data["create_time"] || ""

    new_tr.innerHTML = `<td><span class="text-muted">` + data_No + `</span></td>
                        <td>` + data_username + `</td>
                        <td> <span style="display: none;">` + data_password + ` </span>
                              &nbsp; <i class="fe fe-eye-off" onclick="PwCanSee(`+data_No+`)" style="cursor: pointer;"></i>
                        </td>
                        <td>` + data_remark + ` </td>
                        <td>` + data_create_time + `</td>
                        <td>
                          <a class="icon" href="javascript:void(0)" data-toggle="modal" data-target="#editDataModal" onclick="editData(`+data_No+`,`+data_id+`)">
                            <i class="fe fe-edit"></i>
                          </a>
                        </td>
                        <td>
                          <a class="icon" href="javascript:void(0)" data-toggle="modal" data-target="#deleteDataModal" onclick="deleteData(`+data_No+`,`+data_id+`)">
                            <i class="fe fe-trash-2"></i>
                          </a>
                        </td>`
    tbody.append(new_tr)
  }
  function emptyDataList(){
    let tbody = $("tbody")[0]
    let new_tr = document.createElement("tr")
    new_tr.innerHTML = `<td> 暂无数据！</td>`
    tbody.append(new_tr)
  }

  // 新增数据
  function newData(){
    let inputName = $("input[name=n_user_name]").val().replace(/\s/g,"")
    let inputPassword = $("input[name=n_password]").val().replace(/\s/g,"")
    let inputRemark = $("textarea[name=n_remark]").val().replace(/\s/g,"")

    if (inputName=="" || inputPassword=="" || inputRemark==""){
      showAlert("fe-alert-triangle", "账户名、密码、备注 不能为空！", "alert-danger")
      return false
    }

    $("#newData").addClass("active")
    $.ajax(localStorage.BaseUrl + "/company/add_data", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "POST",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify({
        company_id: chioce_company_id,
        username: inputName,
        password: inputPassword,
        remark: inputRemark
      })
    }).done(function(data){
      console.log(data)
      checkUserToken(data["status"], data["msg"])
      if (data["status"] == 1){
        showAlert("fe-check", data["msg"], "alert-success")
        $("#newDataModal").modal("hide")
        getDataList()
        $("input[name=n_user_name]").val("")
        $("input[name=n_password]").val("")
        $("input[name=n_remark]").val("")
      }else{
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if (status == "error") {
        server_500()
      }
    }).always(()=>{
      $("#newData").removeClass("active")
    })
  }

  // 查询数据
  function searchInfo(){
    // let inputSearch = $("input[name=search]").val()
    getDataList()
  }

  // 编辑数据
  function editData(raw,data_id){
    console.log(raw)
    let trs = $("tbody tr")[raw-1]
    console.log(trs)
    $("input[name=e_data_id]").val(data_id)
    $("input[name=e_username]").val(trs.children[1].innerText.replace(/\s/g,""))
    $("input[name=e_password]").val($("span", trs.children[2]).get(0).innerText.replace(/\s/g,""))
    $("textarea[name=e_remark]").val(trs.children[3].innerText.replace(/\s/g,""))
  }
  function goEditData(){
    let inputDataId = $("input[name=e_data_id]").val()
    let inputName = $("input[name=e_username]").val()
    let inputPassword = $("input[name=e_password]").val()
    let inputRemark = $("textarea[name=e_remark]").val()
    if (inputName=="" || inputPassword=="" || inputRemark==""){
      showAlert("fe-alert-triangle", "账户名、密码、备注 不能为空！", "alert-danger")
      return false
    }

    $("#editData").addClass("active")
    $.ajax(localStorage.BaseUrl + "/company/update_data", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "PUT",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify({
        data_id: inputDataId,
        username: inputName,
        password: inputPassword,
        remark: inputRemark
      })
    }).done(function(data){
      console.log(data)
      checkUserToken(data["status"], data["msg"])
      if (data["status"] == 1){
        showAlert("fe-check", data["msg"], "alert-success")
        $("#editDataModal").modal("hide")
        getDataList()
      }else{
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if (status == "error") {
        server_500()
      }
    }).always(()=>{
      $("#editData").removeClass("active")
    })
  }

  // 删除
  function deleteData(raw,data_id){
    console.log(raw)
    let trs = $("tbody tr")[raw-1]
    console.log(trs)
    $("input[name=d_data_id]").val(data_id)
    $("input[name=d_username]").val(trs.children[1].innerText.replace(/\s/g,""))
    $("input[name=d_password]").val($("span", trs.children[2]).get(0).innerText.replace(/\s/g,""))
    $("textarea[name=d_remark]").val(trs.children[3].innerText.replace(/\s/g,""))
  }
  function goDelData(){
    let inputDataId = $("input[name=d_data_id]").val()

    $("#delData").addClass("active")
    $.ajax(localStorage.BaseUrl + "/company/del_data", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "DELETE",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify({
        data_id: inputDataId
      })
    }).done(function(data){
      console.log(data)
      checkUserToken(data["status"], data["msg"])
      if (data["status"] == 1){
        showAlert("fe-check", data["msg"], "alert-success")
        $("#deleteDataModal").modal("hide")
        getDataList()
      }else{
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if (status == "error") {
        server_500()
      }
    }).always(()=>{
      $("#delData").removeClass("active")
    })
  }

  // 密码是否可见
  function PwCanSee(raw){
    let trs = $("tbody tr").get(raw-1)
    let tds = $("td", trs).get(2)
    let eye = $("i", trs).first()
    // console.log(eye)

    if (eye.hasClass("fe-eye-off")){
      eye.removeClass("fe-eye-off")
      eye.addClass("fe-eye")
      $("span", tds).get(0).setAttribute("style", "")
    }else{
      eye.removeClass("fe-eye")
      eye.addClass("fe-eye-off")
      $("span", tds).get(0).setAttribute("style", "display: none;")
    }
  }

</script>

</html>